<template>
  <div class="left">
    <div class="left-tabs">
      <Tabs @clickEvent="clickTabEvent" />
    </div>
    <div class="left-select" v-if="tabId==='sbqj'">
      <EventSelect @openClickEvent="openClickEvent" />
    </div>
    <div class="hr"></div>
    <div class="left-tree left-tree-sbqj" v-show="tabId==='sbqj'">
      <SbqjTree @handleNodeClick="handleNodeClick" />
    </div>
    <div class="left-tree left-tree-ssjc" v-show="tabId==='ssjc'">
      <SsjcTree @handleNodeClick="handleNodeClick" @toYzw="toYzw" @setYzw="setYzw" />
    </div>
    <div class="left-tree left-tree-ssjc" v-show="tabId==='jqr'">
      <JqrTree @handleNodeClick="handleNodeClick" @toYzw="toYzw" @setYzw="setYzw" />
    </div>
    <div>
      <ControlJqr v-if="tabId==='jqr'" @setControl="setControlJqr" @setWindow="setWindow" />
      <Control v-else @setControl="setControl" @setWindow="setWindow" />
      <!-- <Control  @setControl="setControl" @setWindow="setWindow" /> -->
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Tabs from "../Tabs/index.vue";
import EventSelect from "../EventSelect/index.vue";
import SbqjTree from "../SbqjTree/index.vue";
import SsjcTree from "../SsjcTree/index.vue";
import JqrTree from "../JqrTree/index.vue";
import Control from "../Control/index.vue";
import ControlJqr from "../ControlJqr/index.vue";

@Component({
  components: {
    Tabs,
    EventSelect,
    SbqjTree,
    SsjcTree,
    JqrTree,
    Control,
    ControlJqr,
  },
})
export default class extends Vue {
  tabId: string = "sbqj";
  clickTabEvent(id: string): void {
    this.tabId = id;
  }
  // 树图点击
  handleNodeClick(data) {
    this.$emit("handleNodeClick", data);
  }
  // set预置位
  setYzw(data) {
    this.$emit("setYzw", data);
  }
  // 跳转预置位
  toYzw(data) {
    this.$emit("toYzw", data);
  }
  // 事件打开
  openClickEvent(id) {
    this.$emit("openClickEvent", id);
  }
  // 设置云台控制
  setControl(id) {
    this.$emit("setControl", id);
  }
  // 设置云台控制
  setControlJqr(name) {
    this.$emit("setControlJqr", name);
  }
  //   窗口设置
  setWindow(num) {
    this.$emit("setWindow", num);
  }
}
</script>

<style lang="scss" scoped>
.left {
  width: 100%;
  height: 100%;
  border: 1px #0276c0 solid;
  &-tabs {
    width: 100%;
    height: 0.3rem;
  }
  &-select {
    width: 100%;
    height: 1rem;
  }
  &-tree {
    width: 100%;
    padding: 0.1rem;
    border-bottom: 1px solid #0276c0;
    overflow: auto;
  }
  &-tree-sbqj {
    height: calc(100% - 3.7rem);
  }
  &-tree-ssjc {
    height: calc(100% - 2.7rem);
  }
  .hr {
    width: 90%;
    height: 1px;
    margin: 0rem auto;
    background: linear-gradient(
      90deg,
      rgba(53, 238, 250, 0) 0%,
      rgba(53, 238, 250, 1) 48%,
      rgba(53, 238, 250, 0) 100%
    );
  }
}
</style>

